import { TabBar } from 'antd-mobile'
import { AppOutline, TruckOutline, UnorderedListOutline, UserOutline } from 'antd-mobile-icons'
import style from './index.module.scss'
import { useNavigate, useLocation } from 'react-router-dom'
import { getCookie } from '@/utils'
import { useSelector } from 'react-redux'


const TabbarView = () => {
    const num = useSelector((state: {productNum: {value: number}}) => state.productNum.value)
    const token = useSelector((state: {token: {value: string}}) => state.token.value)

    console.log(num)
    console.log(token)

    const navigate = useNavigate()
    const location = useLocation()
    const { pathname } = location
    const tabs = [
        {
          key: '/home',
          title: '首页',
          icon: <AppOutline />,
        },
        {
          key: '/category',
          title: '分类',
          icon: <UnorderedListOutline />,
        },
        {
          key: '/shopcart',
          title: '购物车',
          icon: <TruckOutline/>,
          badge: token === '' ? '' : (num === 0 ? '' : num),
        },
        {
          key: '/mine',
          title: '我的',
          icon: <UserOutline />,
        },
      ]  
  return (
    <div className={style.tabbarBox}>
      <TabBar activeKey={pathname} onChange={value => navigate(`${value}`)}>
       {tabs.map(item => (
        <TabBar.Item key={item.key} icon={item.icon} title={item.title} badge={item.badge}/>
       ))}
      </TabBar>
    </div>
  )
}

export default TabbarView